<!--
 * @Author: 李天惊 uf_lee@163.com
 * @Date: 2022-12-20 14:35:28
 * @LastEditors: 李小晴 2689279066@qq.com
 * @LastEditTime: 2023-10-28 22:15:55
 * @FilePath: \grazlink20\uc_sys\src\views\Asset\Pasture\components\Edit.vue
 * Copyright (c) 2023 by 李天惊 uf_lee@163.com, All Rights Reserved. 
-->
<script setup lang="ts">
import { PropType, reactive, ref, watch } from 'vue'
import { useTable } from '@/hooks/web/useTableTest'
import { CrudSchema, useCrudSchemas } from '@/hooks/web/useCrudSchemas'
import { spDrugBatchListApi } from '@/api/sp/drug'
import Log from './Log.vue'
const props = defineProps({
  currentRow: {
    type: Object as PropType<Nullable<any>>,
    default: () => null
  },
  detailSchema: {
    type: Array as PropType<DescriptionsSchema[]>,
    default: () => []
  }
})
const specsDataTable = useTable<
  {
    total: number
    list: any[]
  },
  any
>({
  getListApi: spDrugBatchListApi,
  response: {
    data: 'data',
    count: 'count'
  }
})
// 表格数据
const specsDataCrudSchemas = reactive<CrudSchema[]>([
  {
    field: 'batch_code',
    label: '批次号'
  },
  {
    field: 'total_stock',
    label: '总库存'
  },
  {
    field: 'lock_stock',
    label: '锁定库存'
  },
  {
    field: 'available_stock',
    label: '可用库存'
  },
  {
    field: 'action',
    width: 140,
    fixed: 'right',
    label: '操作',
    form: {
      show: false
    },
    detail: {
      show: false
    }
  }
])
const specsDataRegister = specsDataTable.register
const titleData: any = ref(props.currentRow)
const specsDataTableObject = specsDataTable.tableObject
const specsDataMethods = specsDataTable.methods

const specsDataAllSchemas = useCrudSchemas(specsDataCrudSchemas).allSchemas
const actionType = ref('')
const dialogVisible = ref(false)
const dialogTitle = ref('')
const logRef = ref<ComponentRef<typeof Log>>()
const action = async (type: string, row: any = {}) => {
  actionType.value = type
  switch (type) {
    case 'stockRecords':
      const sku = row.name ? row.name : ''
      dialogTitle.value = titleData.value.name + sku + '-出入库记录'
      specsDataTableObject.currentRow = row
      dialogVisible.value = true
      break
    default:
      console.log('未知类型')
  }
}

const newFixedSearch = ref({})
watch(
  () => props.currentRow,
  (val: any) => {
    if (!val) return
    // 设置固定条件
    newFixedSearch.value = {
      drug_id: props.currentRow?.id
    }
    specsDataTableObject.fixedSearch = newFixedSearch.value
  },
  {
    deep: true,
    immediate: true
  }
)

const specsDataGetList = specsDataMethods.getList
specsDataGetList() //查询相关组织列表
</script>

<template>
  <ContentWrap title="主数据">
    <Descriptions :schema="props.detailSchema" :data="currentRow || {}" />
  </ContentWrap>
  <div class="p-10px">
    <ContentWrap title="批次列表">
      <Table
        v-model:pageSize="specsDataTableObject.pageSize"
        v-model:currentPage="specsDataTableObject.currentPage"
        :columns="specsDataAllSchemas.tableColumns"
        :data="specsDataTableObject.tableList"
        :loading="specsDataTableObject.loading"
        :pagination="{
          total: specsDataTableObject.count
        }"
        @register="specsDataRegister"
        :selection="false"
      >
        <template #action="{ row }">
          <ElButton type="primary" @click="action('stockRecords', row)"> 出入库记录 </ElButton>
        </template>
      </Table>
    </ContentWrap>
  </div>
  <ContentWrap title="明细数据">
    <ElButton type="primary" @click="action('stockRecords', {})">查看出入库记录</ElButton>
  </ContentWrap>
  <Dialog v-model="dialogVisible" :title="dialogTitle">
    <Log
      v-if="actionType == 'stockRecords'"
      ref="logRef"
      :current-row="specsDataTableObject.currentRow"
      :titleData="titleData"
    />
    <template #footer>
      <ElButton @click="dialogVisible = false">关闭</ElButton>
    </template>
  </Dialog>
</template>
